<template>
  <!-- 所在位置 -->
  <Top-Page class="positioning-box">
    <NavBar title="所在位置" leftText="取消" rightText="完成" @click-left="navBack" @click-right="navBack" />

    <view class="list">
      <view
        v-for="(item, index) in list"
        :class="['list-item', index === opt ? 'opt' : '']"
        @click="select(item, index)"
      >
        <view class="list-item-location text-one">
          {{ item.location }}
        </view>

        <view class="list-item-address_distance">
          <view class="list-item-distance">
            {{ item.distance }}
          </view>
          <view class="">丨</view>
          <view class="list-item-address text-one">
            {{ item.address }}
          </view>
        </view>
      </view>
    </view>
  </Top-Page>
</template>

<script>
import NavBar from '@/components/NavBar/NavBar.vue';
import { navBack } from '@/utils/utils.js';
import pinia from '@/store/index';
import { useFriendStore } from '@/store/friend.js';
const friendStore = useFriendStore(pinia);

export default {
  data() {
    return {
      navBack: navBack,
      list: [],
      opt: -1
    };
  },
  components: { NavBar },
  created() {
    this.firstApi();
  },
  methods: {
    firstApi() {
      const arr = [
        {
          location: '阿迪斯',
          distance: 23,
          address: '阿松i对哈对哈是'
        },
        {
          location: '阿斯蒂芬',
          distance: 23,
          address: '阿松啊发发发发'
        },
        {
          location: '更好的更好的更好的更好的更好的更好的更好的更好的更好的更好的',
          distance: 23,
          address: '规划局房管局回复规划局房管局和规划局房管局回复规划局房管局和'
        }
      ];
      this.list.push(...arr);
    },
    select(item, index) {
      friendStore.changePositioning(item);

      this.opt = index;
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
